<template>
  <div class="task-manager">

    <el-tabs v-model="activeName">
      <el-tab-pane label="任务管理" name="first">

        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="任务编号">
            <el-input v-model="taskFrom.id" placeholder="请输入任务编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="任务名称">
            <el-select v-model="taskFrom.name" placeholder="请输入任务名称" clearable>
              <el-option label="任务A" value="A"></el-option>
              <el-option label="任务B" value="B"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchTask()"><i class="el-icon-search"></i>查询</el-button>
            <addTask @searchTask1="searchTask" ref="addTask"></addTask>
          </el-form-item>
        </el-form>

        <el-table :data="tableData" stripe style="width: 100%" :header-cell-style="headerStyle">
          <el-table-column prop="id" sortable label="编号" width="100" fixed :filters="[{text: '1', value: 1}, {text: '2', value: 2}, {text: '3', value: 3}, {text: '4', value: 4}]" :filter-method="filterHandler">
          </el-table-column>
          <el-table-column prop="name" sortable label="任务名称" width="180">
          </el-table-column>
          <el-table-column prop="name" sortable label="cron表达式" width="160">
          </el-table-column>
          <el-table-column prop="name" sortable label="定时开关" width="160">
          </el-table-column>
          <el-table-column prop="name" sortable label="报警开关" width="160">
          </el-table-column>
          <el-table-column prop="name" sortable label="添加人" width="160">
          </el-table-column>
          <el-table-column prop="name" label="描述" width="160">
          </el-table-column>
          <el-table-column prop="date" sortable label="添加时间" width="160">
          </el-table-column>
          <el-table-column prop="date" sortable label="更新时间" width="160">
          </el-table-column>
          <el-table-column prop="name" label="操作" width="160" fixed="right">
            <template slot-scope="scpoe">

              <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="clickEditTask(scpoe.row)"></el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="deleteTask(scpoe.row.id)"></el-button>

            </template>

          </el-table-column>
        </el-table>

        <div class="task-maneger-page">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="400">
          </el-pagination>

        </div>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import addTask from './addTask.vue'
export default {
  data () {
    return {

      activeName: 'first',

      taskFrom: {},

      currentPage4: 1,
      pageSize: 100,

      headerStyle: {
        'background-color': '#f2f2f2',
        'font-weight': 'bold',
        'color': 'rgb(39, 38, 38)',
        'heigth': '39px',

      },



      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎2',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎3',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]

    }
  },

  components: {
    addTask,
  },

  methods: {


    //查询任务
    searchTask (id, name, pageIndex, pageSize) {
      this.$message({
        message: '查询任务成功！',
        type: 'success'
      });
    },


    //点击编辑按钮
    clickEditTask (taskFrom) {
      this.$refs.addTask.dialogVisible = true

      this.$refs.addTask.apiFrom = taskFrom

      this.$refs.addTask.typeName = '编辑任务'
      this.$refs.addTask.type = 'edit'

    },


    //删除任务
    deleteTask (id) {
      this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {


        this.$message({
          type: 'success',
          message: '删除成功!'
        });

        this.searchTask()
      }).catch(() => {

        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },


    //过滤
    filterHandler (value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },


    //页大小变更
    handleSizeChange (val) {
      console.log(val)
      this.pageSize = val
      this.searchTask(this.taskFrom.id, this.taskFrom.name, 1, val)

    },

    //当前页变更
    handleCurrentChange (val) {
      this.currentPage4 = val
      this.searchTask(this.taskFrom.id, this.taskFrom.name, val, this.pageSize)
      console.log(val)
    },
  }
}
</script>

<style scoped>
.task-maneger-page {
  margin-top: 50px;
  float: right;
}
</style>